<template>
    <el-popconfirm :confirm-button-text="confirmTxt" :cancel-button-text="cancelTxt" :icon="icon" :icon-color="iconColor" :title="msg" @confirm="onConfirm" @cancel="onCancel">
        <template #reference>
            <el-button :type="type" :icon="showIcon?btnIcon:''">
                <slot>删除</slot>
            </el-button>
        </template>
    </el-popconfirm>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useStore } from "vuex";
/**
 * state 数据类型
 */
// interface IState {}
export default defineComponent({
    name: "PConfirmBtn",
    props: {
        confirmTxt: {
            type: String,
            default: "确定",
        },
        cancelTxt: {
            type: String,
            default: "取消",
        },
        showIcon: {
            type: Boolean,
            default: true,
        },
        icon: {
            type: String,
            default: "el-icon-question",
        },
        btnIcon: {
            type: String,
            default: "el-icon-delete-solid",
        },
        iconColor: {
            type: String,
            default: "red",
        },
        msg: {
            type: String,
            default: "确定要删除吗?",
        },
        type: {
            type: String,
            default: "danger",
        }
    },
    emits: ["confirm", "cancel"],
    setup(props, { emit }) {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        // const state = reactive<IState>({});
        // 确定事件
        const onConfirm = (): void => {
            emit("confirm");
        };
        // 取消事件
        const onCancel = (): void => {
            emit("cancel");
        };
        return {
            UIAuth,
            bodySize,
            //  ...toRefs(state),
            onConfirm,
            onCancel,
        };
    },
});
</script>

<style scoped lang="scss">
</style>